﻿
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" >
	<title>Register</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	<link rel="shortcut icon" href="favicon.ico">

	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
	
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/animate.css">
	<link rel="stylesheet" href="./css/style.css">
		<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<!-- Modernizr JS -->
	<script src="./js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="./js/respond.min.js"></script>
	<![endif]-->
		<script type="text/javascript">

            //验证邮箱
            function checkUserEmail(){
                var useremail = document.getElementById('useremail');
                var erremail = document.getElementById('erremail');
                var pattern = /^\w+((-\w+)(\.\w+))*\@[A-Za-z0-9]+((\.-)[A-Za-z0-9]+)*\.[A-Za-z0-9]{2,6}$/;

                if(useremail.value.length == 0){
                    erremail.innerHTML="邮箱不能为空！";
                    erremail.className="error";
                    return false;
                }
                if(!pattern.test(useremail.value)){
                    erremail.innerHTML="邮箱格式不合规范";
                    erremail.className="error";
                    return false;
                }
                else{
                    checkEmail(useremail.value,erremail);
                    if(erremail.className=="success")
                        return true;
                    else return false;
                }
            }
            function checkEmail(email,erremail) {
                $.ajax({		//"e": email
                    type: "post",
                    url: "../user/checkEmail",

					data: {"e":email},
                    success: function(data) {
                        if (data==1) {
                            erremail.innerHTML=" ";
                            erremail.className="success";
                        }
                        if(data==0){
                            erremail.innerHTML="该邮箱已注册";
                            erremail.className="error";
                        }
                    },
                    error:function (data) {
                        alert("操作失败")
                    }
                });
            }

            //验证用户名
            function checkUserName(){
                var username = document.getElementById('username');
                var errname = document.getElementById('errname');
                if(username.value.length == 0){
                    errname.innerHTML="用户名不能为空！";
                    errname.className="error";
                    return false;
                }
                else{
                    errname.innerHTML=" ";
                    errname.className="success";
                    return true;
                }
            }
            //验证密码
            function checkUserPass(){
                var userpass = document.getElementById('password');
                var errpass = document.getElementById('errpass');
                var pattern = /^\w{3,}$/;
                if(userpass.value.length == 0){
                    errpass.innerHTML="密码不能为空！";
                    errpass.className="error";
                    return false;
                }
                if(!pattern.test(userpass.value)){
                    errpass.innerHTML="密码至少为3位";
                    errpass.className="error";
                    return false;
                }
                else{
                    errpass.innerHTML=" ";
                    errpass.className="success";
                    return true;
                }
            }
            //确认密码
            function checkUserPassAgin(){
                var userpass = document.getElementById('password');
                var userpassag = document.getElementById('re-password');
                var errpassag = document.getElementById('errpassag');
                if((userpass.value)!=(userpassag.value)||userpassag.value.length==0){
                    errpassag.innerHTML="上下密码不一致";
                    errpassag.className="error";
                    return false;
                }
                else{
                    errpassag.innerHTML=" ";
                    errpassag.className="success";
                    return true;
                }
            }
            function checkForm(){
                var emailtip = checkUserEmail();
                var nametip = checkUserName();
                var passtip = checkUserPass();
                var passagtip = checkUserPassAgin();
                if(!(emailtip && nametip && passtip && passagtip)){
                    return false;
				}
                var name = document.getElementById("username").value;
                var email = document.getElementById("useremail").value;
                var password = document.getElementById("password").value;

                $.ajax({
					type: "post",

					url: "../user/register",
					data: {
					    n:name,
						e: email,
						p: password,
					},
					datatype:"json",
					success: function(data) {
					    if(data=="success")
					        window.location.href = "login.html";
					    if(data=="false")
					        alert("注册失败");
					    },
					error:function (data) {
					    alert("操作失败")
					}
                });
                return emailtip && nametip && passtip && passagtip;}
		</script>
	</head>
	<body class="style-3">

			<div class="row">
				<div class="col-md-4 col-md-push-8">
					

					<!-- Start Sign In Form -->
					<form class="fh5co-form animate-box" data-animate-effect="fadeInRight">
						<h2>注 册</h2>
						<!--<div class="form-group">-->
							<!--<div class="alert alert-success" role="alert">Your info has been saved.</div>-->
						<!--</div>-->
						<div class="form-group">
							<label for="username" class="sr-only">用户名：</label>
							<input type="text" class="form-control" id="username" onBlur="checkUserName()"
								   oninput="checkUserName()" placeholder="Name" autocomplete="off">
							<span class="default" id="errname" ></span>
						</div>
						<div class="form-group">
							<label for="useremail" class="sr-only">邮箱：</label>
							<input type="email" class="form-control" id="useremail" onBlur="checkUserEmail()"
								   oninput="checkUserEmail()" placeholder="Email" autocomplete="off">
							<span class="default" id="erremail"></span>
						</div>
						<div class="form-group">
							<label for="password" class="sr-only">密码：</label>
							<input type="password" class="form-control" id="password" onBlur="checkUserPass()"
								   oninput="checkUserPass()" placeholder="Password" autocomplete="off">
							<span class="default" id="errpass"></span>
						</div>
						<div class="form-group">
							<label for="re-password" class="sr-only">确认密码：</label>
							<input type="password" class="form-control" id="re-password" onBlur="checkUserPassAgin()"
								   oninput="checkUserPassAgin()" placeholder="Re-type Password" autocomplete="off">
							<span class="default" id="errpassag"></span><br>
						</div>
						<div class="form-group">
							<input type="button" value="提 交" class="btn btn-primary" onclick="checkForm()">
						</div>
					</form>
					<!-- END Sign In Form -->
				</div>
			</div>
			<div class="row" style="padding-top: 60px; clear: both;">

			</div>
		</div>
	
	<!-- jQuery -->
	<script src="./js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="./js/bootstrap.min.js"></script>
	<!-- Placeholder -->
	<script src="./js/jquery.placeholder.min.js"></script>
	<!-- Waypoints -->
	<script src="./js/jquery.waypoints.min.js"></script>
	<!-- Main JS -->
	<script src="./js/main.js"></script>

	</body>
</html>

